<template>
    <!-- <div class="container" :class="{ 'dark': value1 == true }"> -->
    <div class="container" :class="value1 == true ? 'dark' : ''">
        <img class="bg" src="@/assets/login.svg" alt="">
        <el-switch v-model="value1" class="switch" />
        <div class="box">
            <p class="text">PUREWAGDH登录</p>
            <el-form :model="ruleForm" label-width="80px" :rules="rules">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="手机号" prop="phonenum">
                    <el-input v-model="ruleForm.phonenum" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input v-model="ruleForm.code" placeholder="请输入验证码">
                        <template #append>1234</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" class="btn" @click="onLogin">登录</el-button>
        </div>
    </div>
</template>
<script>
import request from '@/utils/request.js'
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            ruleForm: {
                username: '',
                phonenum: '',
                password: '',
                code: '',
            },
            rules: {
                username: [{
                    required: true, message: '请填写用户名', trigger: 'blur'
                }],
                password: [{
                    required: true, message: '请填写密码', trigger: 'blur'
                }],
                phonenum: [
                    { required: true, message: '请填写手机号', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
                ]
            },
            value1: false
        }
    },
    methods: {
        onLogin() {
            console.log(this.ruleForm, 'ruleForm')
            request.post('/login', this.ruleForm).then(res => {
                if (res.data.code == 200) {
                    // 提示登录成功
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    // 保存token 和用户名
                    localStorage.setItem('token', res.data.token)
                    localStorage.setItem('username', this.ruleForm.username)
                    // 跳转首页
                    this.$router.push('/')
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    // background: rgb(183, 182, 182);

    &.dark {
        background: #000;
    }


    .bg {
        position: absolute;
        bottom: 50px;
        left: 0;
        width: 600px;
    }

    .switch {
        position: fixed;
        right: 40px;
        top: 20px;
    }

    .box {
        position: absolute;
        left: 70%;
        top: 60%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 300px;
        // background: rgb(54, 51, 51);
        padding: 20px;

        .text {
            text-align: center;
            font-size: 20px;
            color: #807c7c;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .btn {
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 40px auto;
        }
    }
}
</style>
